<template>
	<scroll-view scroll-y class="" style="background: #AEE2DA;" :style="{background:'url('+Imgbase+'/1zhan_new_sbgc2.jpg)','background-size':'100%',}">
		<cu-custom bgColor="bg-newblue2" :isBack="true"><block slot="content">{{title}}</block></cu-custom>
		<view v-if="desc" style="position: relative;width: 98%;margin-left: 1%;margin-top: 10upx;min-height: 1300upx;z-index: 999;">
			<scroll-view scroll-x class="bg-white nav" style="width: 92%;margin-left: 4%;box-shadow:3px 3px 3px 0px #e5c757;border-radius: 15upx;">
				<view class="padding text-center text-ablack">
					<span>
						个人连续{{num}}抽<br>
					</span>
					<span v-if="open_custom_box == 0">
						不出SSS、SSR、SR赏级的赏品<br>
					</span>
					<span v-if="open_custom_box == 1">
						不出{{open_custom_box_mes}}赏级的赏品<br>
					</span>
					<span>
						则进行一次MBOX赏抽取
					</span>
				</view>
			</scroll-view>
			<view style="width: 100%;height: 20upx;"></view>
			<view style="clear: both;"></view>
			<view class="" style="position: relative;background: inherit;">
				<view class="cu-card article light" 
				style="position: relative;
				width: 100%;margin-left: 0%;margin-top: 0upx;" v-for="(item,index) in desc.extroinfo">
					<view class="padding-left padding-tb-xs" style="height: 55upx;">
						<view class="fl">
						<image :src="Imgbase + '/infinite_reword_ssr.png'"
						style="width: 108upx;height: 45upx;"  mode="widthFix" v-if="item.reword_type_id == 49"></image>
						<image :src="Imgbase + '/infinite_reword_sr.png'"
						style="width: 80upx;height: 45upx;"  mode="widthFix" v-if="item.reword_type_id == 51"></image>
						<image :src="Imgbase + '/infinite_reword_sp.png'"
						style="width: 80upx;height: 45upx;"  mode="widthFix" v-if="item.reword_type_id == 30"></image>
						<image :src="Imgbase + '/infinite_reword_r.png'"
						style="width: 50upx;height: 45upx;"  mode="widthFix" v-if="item.reword_type_id == 52"></image>
						<image :src="Imgbase + '/infinite_reword_n.png'"
						style="width: 50upx;height: 45upx;"  mode="widthFix" v-if="item.reword_type_id == 53"></image>
						<image :src="Imgbase + '/infinite_reword_m.png'"
						style="width: 50upx;height: 45upx;"  mode="widthFix" v-if="item.reword_type_id == 16"></image>
						<image :src="Imgbase + '/infinite_reword_sss.png'"
						style="width: 108upx;height: 45upx;"  mode="widthFix" v-if="item.reword_type_id == 50"></image>
						</view>
						<text class="fl padding-left-sm" style="line-height: 50upx;">共{{item.goodinfo.length}}种 获取概率{{Number(item.point/desc.point*100).toFixed(3)}}%</text>
					</view>
					<scroll-view scroll-x="true" scroll-with-animation
					style="width: 100%;white-space: nowrap;overflow : auto;margin-bottom: 10upx;height: 390upx;">
					<view class=""  v-for="(gooditem,goodindex) in item.goodinfo" 
					style="width: 38%;margin-bottom: 10upx;margin-left: 25rpx;display: inline-block;padding: 10upx 10upx;
					margin-right: 0rpx;margin-top: 0rpx;position: relative;height: 390upx;"
					:style="{background:item.reword_type_id == 49?'url('+Imgbase+'/infinite_border_ssr.png) no-repeat':
					item.reword_type_id == 51?'url('+Imgbase+'/infinite_border_sr.png) no-repeat':
					item.reword_type_id == 30?'url('+Imgbase+'/infinite_border_sp.png) no-repeat':
					item.reword_type_id == 52?'url('+Imgbase+'/infinite_border_r.png) no-repeat':
					item.reword_type_id == 53?'url('+Imgbase+'/infinite_border_n.png) no-repeat':
					item.reword_type_id == 16?'url('+Imgbase+'/infinite_border_m.png) no-repeat':
					item.reword_type_id == 50?'url('+Imgbase+'/infinite_border_sss.png) no-repeat':''
					,'background-size':'100% 100%',}"
					>
						<image :src="gooditem.goodmes.adimage"
						mode="widthFix" style="min-height: 105px;"></image>
						<view class="text-newblack" style="max-width: 250upx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
							{{gooditem.goodmes.name}}
						</view>
						<view class="text-grey text-sm">
							获取概率:{{Number(gooditem.point/desc.point*100).toFixed(3)}}%
						</view>
					</view>
					</scroll-view>
				</view>
				<view style="clear: both;"></view>
			</view>
			<view style="clear: both;"></view>
		</view>
		<view style="clear: both;"></view>
		<view style="width: 100%;height: 180upx;"></view>
		<view class="cu-load load-modal" v-if="loadModal">
			<image src="/static/icon.jpg" mode="aspectFit"></image>
			<view class="gray-text">加载中...</view>
		</view>
	</scroll-view>
</template>

<script>
  export default {
    data() {
      return {
		Imgbase:getApp().globalData.Imgbase,
        desc: null,
		id:null,
		title:'抽赏',
		page:1,
		count:10,
		modalName: null,
		did:0,
		loadModal: false,
		round:0,
		num:0,
		open_custom_box:0,
		open_custom_box_mes:'',
      }
    },
    methods: {
		hideModal(e) {
			this.modalName = null
		},
		loadDesc(id){
			let _this = this;
			_this.page = 1;
			_this.loadModal = true;
			uni.request({
				url: _this.$globals.apibase+'/api/Infinite/boxdesc2',
				data: {
					token: uni.getStorageSync('token'),
					id: id,
				},
				method: 'POST',
				header: {
					'content-type': 'application/json'
				},
				success: (res) => {
					if(res.data.code == '401'){
						uni.setStorageSync('token', '');
					}
					if(res.data.code == '1'){
						_this.desc = res.data.data.desc.box_mes2;
						_this.title = res.data.data.desc.box_mes2.name;
					}
					if(res.data.code == '0'){
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						});
					}
					_this.loadModal = false;
				}
			});
		},
    },
	onUnload() {
	},
	onShow(){
	},
    onLoad(options) {
		let _this = this;
		this.did = options.id;
		this.num = options.num;
		this.open_custom_box = options.open_custom_box;
		this.open_custom_box_mes = options.open_custom_box_mes;
		this.loadDesc(this.did);
    },
  }
</script>

<style>
	button::after{border: initial;}
	.fl{
		float: left;
	}
	.fr{
		float: right;
	}
	.refresh_icon{
		height: 80upx;
		width: 80upx;
	}
</style>
